<template>
    <div class="app-container">
        <el-row >
            <el-col >
                <div class="head-container">
                    <el-input v-model="keyWord"  clearable placeholder="输入操作人/操作描述搜索" style="width: 200px;" class="filter-item"></el-input>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator=":"
                        class="el-range-editor--small filter-item"
                        style="height: 30.5px;width: 220px;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <!-- <el-select clearable placeholder="状态" class="filter-item" style="width: 90px">
                        <el-option />
                    </el-select> -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </div>
                    <!-- 导出 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
                    </div>
                    <div style="float:right">
                        <el-button size="mini" icon="el-icon-refresh" @click="getData()">刷新</el-button>
                    </div>
                </div>
            </el-col>   
        </el-row>
        <div>
            <el-table v-loading="tableLoading" border :data="tableData" size="small" style="width: 100%;">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="description" label="操作描述" />
                <el-table-column prop="username" label="操作用户" />
                <el-table-column prop="uri" label="接口路劲" />
                <el-table-column prop="method" label="请求类型" />
                <el-table-column prop="ip"  label="IP地址" />
                <el-table-column prop="spendTime"  label="消耗时间(ms)" />
                <el-table-column prop="code"  label="操作状态码" />
                <el-table-column prop="startTime"  label="操作时间" />
                <el-table-column label="操作" width="80" align="center" fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleAdd(scope.row,'edit')"/> -->
                        <!-- <el-button size="mini" type="info"    icon="el-icon-view" @click="handleView(scope.row) "/> -->
                        <el-popover :ref="scope.row.id" placement="top" width="180">
                            <p>确定删除本条数据吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()" >取消</el-button>
                                <el-button :loading="delLoading" type="primary" size="mini" @click="delCommit(scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
                <!--分页组件-->
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="currentPage" 
                :page-sizes="[10, 20, 50, 100]" 
                :page-size="pageSize" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
        </div>
        <div>
            <log-add-and-edit ref="logAddAndEdit"></log-add-and-edit>
        </div>
    </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import { queryLog,delLog,editLog } from "@/api/log"
import AddAndEdit from '@/views/system/log/dialog/AddAndEdit'
export default {
    name: "Log",
    // 设置数据字典
    components:{
        'log-add-and-edit':AddAndEdit,  //新增/编辑日志组件
    },
    data() {
        return{
            //==========>分页相关<==========//
            total      : 0,           // 总页数
            pageNum    : 1,           // 第几页
            pageSize   : 10,          // 每页显示的数量
            currentPage: 1,           // 当前页
            //==========>分页相关<==========//
            date        : [],//查询时间
            keyWord     : '',//查询关键字
            tableData   : [],
            tableLoading: false,
            delLoading:false
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            //调用获取日志api
            this.apiQueryLog()
        },
        //删除日志
        delCommit(row){
            this.apiDelLogById(row.id)
        },
        changeEnabled(row){
            this.editLogStatus(row.id,row.status)
        },
        handleAdd(row,type){
            let isAdd = (type === 'add'? true:false)
            this.$nextTick(()=>{
                this.$refs.logAddAndEdit.init(row,isAdd)
            })
        },
        handleView(row){
            this.$nextTick(()=>{
                this.$refs.logInfo.init(row)
            })
        },
        search(){
            this.apiQueryLog()
        },
        //==========>分页相关<==========//
        handleSizeChange(val) {           
            this.pageSize = val
            this.apiQueryLog()            
        }, 
        handleCurrentChange(val) {         
            this.pageNum = val          
            this.apiQueryLog()                
        },
        //==========>分页相关<==========//
        //==========>请求api接口<==========//
        //查询日志集合api
        apiQueryLog(){
            //管理员查询接口
            this.tableLoading =true
            let params = {
                pageNum : this.pageNum,
                pageSize: this.pageSize,
                keyWord : this.keyWord
            }
            !!this.date && (params.date = this.date.join(','))
            queryLog(params).then(res=>{
                if(res.code ===200){
                    this.tableData    = res.data.list
                    this.total        = res.data.total
                    this.tableLoading = false
                }
            }).catch((err)=>{
                this.tableLoading = false
            })
        },
        //通过日志id删除日志
        apiDelLogById(id){
            //管理员删除接口
            this.delLoading =true
            delLog(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.delLoading = false
                    this.$refs[id].doClose()
                    this.apiQueryLog()
                }
            }).catch((err)=>{
                this.$refs[id].doClose()
                this.delLoading = false
            })
        },
        //==========>请求api接口<==========//
    }
        
}
</script>
<style scoped>
</style>